<template>
	<view class="home">
		<view class="home-header">
			<image class="header-logo" src="../../static/images/logo.png" mode=""></image>
			<view class="header-search">
				<text class="iconfont icon-sousuo"></text>
				<input type="text" placeholder-style="color:#f00" placeholder="搜索商品">
			</view>
			<button class="header-btn">搜索商品</button>
		</view>
		
		<!-- 滚动视图部分 -->
		<scroll-view scroll-x="true" enable-flex class="home-nav">
			<view class="nav-item" :class="{active:navId===0}" @click="changeNavId(0)">推荐</view>
			<view class="nav-item" :class="{active:navId===nav.L1Id}" v-for="nav in navList" :key="nav.L1Id" @click="changeNavId(nav.L1Id)">{{nav.text}}</view>
		</scroll-view>
		
		<scroll-view scroll-y="true" class="home-content" >
			<view v-show="navId===0">
				<swiper class="content-lunbo" :indicator-dots="true" circular :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item>
						<image src="https://yanxuan.nosdn.127.net/e3efdfeaa5624dd3dd4f3d86201eee5d.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image>
					</swiper-item>
					<swiper-item>
						<image src="https://yanxuan.nosdn.127.net/static-union/167843630865382b.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image>
					</swiper-item>
					<swiper-item>
						<image src="https://yanxuan.nosdn.127.net/static-union/1678772937d79140.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image>
					</swiper-item>
				</swiper>
				<!-- 内容标语 内容口号 -->
				<view class="content-slogan">
					<view class="slogan-item" v-for="slogan in sloganList" :key="slogan.desc">
						<image :src="slogan.icon" mode=""></image>
						<text>{{slogan.desc}}</text>
					</view>
				</view>
				<!-- 内容导航项 -->
				<view class="content-nav">
					<view class="nav-item" v-for="nav in navList" :key="nav.L1Id">
						<image :src="nav.picUrl" mode=""></image>
						<text>{{nav.text}}</text>
					</view>
				</view>
				<!-- 楼层 -->
				<ContentFloor v-for="floor in floorsList" :key="floor.titlePicUrl" :floor="floor"></ContentFloor>
			</view>
			<Card v-show="navId!==0" :navId="navId"></Card>
		</scroll-view>
	</view>
</template>

<script>
	import ContentFloor from './components/ContentFloor.vue'
	import {mapGetters} from 'vuex'
	import Card from './components/Card.vue'

	export default{
		name:'Home',
		data(){
			return{
				isShow:false,
				navId:0
			}
		},
		components:{
			ContentFloor,
			Card
		},
		computed:{
			...mapGetters('home',['navList','sloganList','floorsList']),
			getList(){
				
			}
		},
		methods:{
			changeNavId(id){
				this.navId = id
			}
		},
		onLoad(){
			this.$store.dispatch('home/getHomeInfoData')
		}
		
	}
</script>
<style lang="stylus" scoped>
	.home
			.home-header
				display: flex
				align-items: center
				height: 40upx
				padding:20upx 10upx
				.header-logo 
					width: 120upx;
					height: 40upx;
					margin: 0 10upx
				.header-search 
					border: 1upx solid #999;
					flex:1;
					margin:0 10upx
					font-size:26upx
					padding:4upx
					display:flex;
					align-items: center
					.iconfont 
						margin-right:10upx
				.header-btn 
					width: 140upx
					// height: 40upx;
					line-height: 36upx
					font-size:26upx
					text-align: center
					padding:10upx
			.home-nav 
				display: flex
				height: 80upx
				.nav-item 
					flex-shrink: 0
					font-size:26upx
					padding:20upx 10upx
					text-align: center
					width: 120upx
					&.active 
						border-bottom: 1upx solid #f00
			.home-content
				height: calc(100vh - 160upx)
				.content-lunbo 
					image 
						width: 100%;
						height: 300upx;
				.content-slogan 
					display: flex
					justify-content: space-around
					padding:10upx 0
					.slogan-item 
						font-size:24upx
						display: flex 
						align-items: center
						image 
							width: 30upx;
							height: 30upx;
							margin-right: 4upx
				.content-nav 
					display: flex
					flex-wrap: wrap
					.nav-item 
						width: 20%
						font-size:26upx
						display: flex
						flex-direction: column
						align-items: center
						padding-top:20upx
						image 
							width: 76%;
							height: 120upx;
							padding-bottom:20upx
			
					
				
				
	
</style>